<template>
    <div class="radar-component">
        <filter-params @paramsChange="paramsChange" :config="config" :filterParams="config.filterParams" ></filter-params>
        <div class="radar-content" :ref="config.alias"></div>
    </div>
</template>

<script>
import ChartPublic from '../ChartPublic.js'
export default {
    /**
     * 雷达图
     */
    name: "radarComponent",
    mixins: [ChartPublic],
    data() {
        return {
        }
    },
    methods: {
        setOption(){
            //图例组件
            let legend = [];
            //系列列表数据
            let seriesData = [];
            //指标
            let indicator=[];
            //未配置颜色图例
            if(this.config.colorLegends.length==0){
                //获取度量
                for (let i = 0; i < this.config.measures.length; i++) {
                    let array=[];
                    let measure = this.config.measures[i];
                    legend.push(measure.fieldLabel);
                    for (let j = 0; j < this.data.length; j++) {
                        let value= this.data[j][measure.tableName+'_'+measure.fieldName];
                        if(value){
                            array.push(value);
                        }else {
                            array.push(0);
                        }
                    }
                    let obj={
                        name: measure.fieldLabel,
                        value:array
                    }
                    seriesData.push(obj);
                }
            }else {
                //图例组件配置
                let legendArr = [];
                //维度配置
                let xAxisArr = [];
                //获取维度
                this.getDimensions(xAxisArr);
                //根据颜色图例与度量获取图例组件
                for (let i = 0; i < this.config.colorLegends.length; i++) {
                    let colorLegend = this.config.colorLegends[i];
                    for (let j = 0; j < this.config.measures.length; j++) {
                        let measure = this.config.measures[j];
                        for (let k = 0; k < this.data.length; k++) {
                            let colorValue =this.getColorValue(this.data[k],colorLegend,measure);
                            let number = legend.indexOf(colorValue);
                            if(number==-1){
                                legend.push(colorValue);
                                legendArr.push({
                                    key:measure.tableName+"_"+measure.fieldName,
                                    fieldName:colorLegend.tableName+'_'+colorLegend.fieldName,
                                    value:this.data[k][colorLegend.tableName+'_'+colorLegend.fieldName]
                                })
                            }
                        }
                    }
                }
                for (let i = 0; i < legendArr.length; i++) {
                    let legendObj=legendArr[i];
                    let array=[];
                    for (let j = 0; j < xAxisArr.length; j++) {
                        let val=0;
                        for (let k = 0; k < this.data.length; k++) {
                            let xAxisObj=xAxisArr[j];
                            if(this.config.dimensions.length>1){
                                let xAxisKeys = xAxisObj.key.split("-");
                                let xAxisVal="";
                                for (let l = 0; l < xAxisKeys.length; l++) {
                                    if(l!=0){
                                        xAxisVal+="-";
                                    }
                                    let xVal = this.data[k][xAxisKeys[l]];
                                    //维度配置了字段渲染
                                    if(typeof(xVal)!='string'){
                                        xVal=xVal.oldValue;
                                    }
                                    xAxisVal+=xVal;
                                }
                                if(xAxisVal==xAxisObj.value && this.data[k][legendObj.fieldName]==legendObj.value ){
                                    val=this.data[k][legendObj.key];
                                    break;
                                }
                            }else {
                                let xVal = this.data[k][xAxisObj.key];
                                //维度配置了字段渲染
                                if(typeof(xVal)!='string'){
                                    xVal=xVal.oldValue;
                                }
                                if(xVal==xAxisObj.value && this.data[k][legendObj.fieldName]==legendObj.value ){
                                    val=this.data[k][legendObj.key];
                                    break;
                                }
                            }

                        }
                        array.push(val)
                    }
                    let obj={
                        name: legend[i],
                        value:array
                    }
                    seriesData.push(obj);
                }
            }
            let indicatorMax=[];
            if(this.config.dimensions){
                indicatorMax=this.config.dimensions[0].indicatorMax || [];
            }
            for (let i = 0; i < this.dimensionVals.length; i++) {
                let max=1000;
                if(indicatorMax.length==1){
                    max=indicatorMax[0].max || max;
                }else {
                    let obj=indicatorMax.find(item=>item.label==this.dimensionVals[i]);
                    if(obj && obj.max){
                        max=obj.max;
                    }
                }
                indicator.push({ name: this.dimensionVals[i], max: max });
            }
            let areaStyle=undefined;
            if(this.config.advConfig.areaStyle){
                areaStyle={};
            }
            this.option={
                legend: {
                    data: legend,
                    show:this.config.advConfig.legendShow,
                    left:this.config.advConfig.legendLeft,
                    top:this.config.advConfig.legendTop
                },
                tooltip: {
                    trigger: 'item'
                },
                toolbox: {
                    feature: {
                        saveAsImage: {show:this.config.advConfig.saveAsImage},
                        restore: {show: this.config.advConfig.restore}
                    }
                },
                color:this.getColors(),
                radar: {
                    indicator: indicator
                },
                series: [
                    {
                        type: 'radar',
                        areaStyle: areaStyle,
                        data: seriesData
                    }
                ]
            };
        }
    }
}
</script>
<style scoped>
.radar-component{
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}
.radar-content{
    flex: 1;
}
</style>
